import React, { useState } from 'react';
import { userAPI } from '../../services/api';
import '../styles/auth.css';

interface RegisterProps {
  onRegisterSuccess: () => void;
  onGoToLogin: () => void;
}

const Register: React.FC<RegisterProps> = ({ onRegisterSuccess, onGoToLogin }) => {
  const [username, setUsername] = useState<string>('');
  const [password, setPassword] = useState<string>('');
  const [nickname, setNickname] = useState<string>('');
  const [error, setError] = useState<string>('');
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    
    // 表单验证
    if (!username || username.length < 3) {
      setError('用户名至少需要3个字符');
      return;
    }
    
    if (!password || password.length < 6) {
      setError('密码至少需要6个字符');
      return;
    }
    
    if (!nickname || nickname.length < 2) {
      setError('昵称至少需要2个字符');
      return;
    }

    try {
      setIsLoading(true);
      const response = await userAPI.register(username, password, nickname);
      
      if (response.success) {
        console.log('注册成功:', response.data);
        onRegisterSuccess();
      } else {
        setError(response.message || '注册失败，请稍后重试');
      }
    } catch (err) {
      setError('注册失败，请稍后重试');
      console.error('注册错误:', err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h2>注册 - 一念之间</h2>
        <form onSubmit={handleRegister} className="auth-form">
          <div className="form-group">
            <label htmlFor="username">用户名</label>
            <input
              type="text"
              id="username"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              placeholder="请输入用户名（至少3个字符）"
              disabled={isLoading}
            />
          </div>
          <div className="form-group">
            <label htmlFor="password">密码</label>
            <input
              type="password"
              id="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码（至少6个字符）"
              disabled={isLoading}
            />
          </div>
          <div className="form-group">
            <label htmlFor="nickname">昵称</label>
            <input
              type="text"
              id="nickname"
              value={nickname}
              onChange={(e) => setNickname(e.target.value)}
              placeholder="请输入昵称（至少2个字符）"
              disabled={isLoading}
            />
          </div>
          {error && <div className="error-message">{error}</div>}
          <button 
            type="submit" 
            className="auth-button"
            disabled={isLoading}
          >
            {isLoading ? '注册中...' : '注册'}
          </button>
          <div className="auth-link">
            已有账号？ <span onClick={onGoToLogin}>立即登录</span>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Register;